<template>
  <div>
    <div class="left-box">
      <div class="box-main box1">
        <div class="title">数据管理</div>
        <div class="box">
          <div class="left-list">
            <div class="left-list-num">5077人</div>
            <div class="left-list-title">实有人口</div>
          </div>
          <div class="left-list">
            <div class="left-list-num">614辆</div>
            <div class="left-list-title">实有车辆</div>
          </div>
          <div class="left-list">
            <div class="left-list-num">1488套</div>
            <div class="left-list-title">实有房屋</div>
          </div>
          <div class="left-list">
            <div class="left-list-num">23人</div>
            <div class="left-list-title">重点人群</div>
          </div>
        </div>
      </div>
      <div class="box-main box2">
        <div class="title">重点人群</div>
        <div class="box">
          <ul class="choose">
            <li>上访人员</li>
            <li>犯罪前科人员</li>
            <li>吸毒人员</li>
          </ul>
          <ul class="message">
            <li class="name-t">姓名</li>
            <li class="sex-t">性别</li>
            <li class="age-t">年龄</li>
            <li class="cellphone-t">联系方式</li>
            <li class="address-t">家庭住址</li>
          </ul>
          <ul class="message-list">
            <li>
              <span>王自健</span>
              <span>男</span>
              <span>35</span>
              <span>18612341234</span>
              <span>某某街某某号</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <div class="right-box">
      <div class="box-main box3">
        <div class="title">重点人员学历</div>
        <div class="box">
          <echart :options="option2" />
        </div>
      </div>
      <div class="box-main box3">
        <div class="title">人员统计</div>
        <div class="box">
          <echart :options="option1" />
        </div>
      </div>
      <div class="box-main box3">
        <div class="title">安防统计</div>
        <div class="box">
          <echart :options="option3" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Echart from "components/common/echart/Echart.vue";
import { echart1, echart20, echart19 } from "./option";
export default {
  components: { Echart },
  data() {
    return {
      option1: null,
      option2: null,
      option3: null,
    };
  },

  created() {},
  mounted() {
    this.option1 = echart1();
    this.option2 = echart20();
    this.option3 = echart19(
      ["卫生所", "养老院", "幼儿园"],
      [100, 200, 300, 400]
    );
  },

  methods: {},
};
</script>

<style lang="scss" scoped>
.left-box {
  .box1 {
    .box {
      width: 100%;
      height: 15.625rem;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-evenly;
      align-content: space-evenly;
      .left-list {
        width: 8.125rem;
        height: 6.25rem;
        background: url(~assets/img/ksh/anfang/three_le.png) no-repeat center
          bottom;
        background-size: 100%;
        .left-list-num,
        .left-list-title {
          width: 100%;
          background-image: linear-gradient(#fff, #5cc7ff);
          background-clip: text;
          -webkit-background-clip: text;
          color: transparent;
          text-align: center;
          font-weight: bold;
          font-size: 1.625rem;
          font-family: shuzi;
        }
        .left-list-title {
          font-size: 1.125rem;
        }
      }
    }
  }
  .box2 {
    .box {
      width: 100%;
      height: 18.75rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      .choose {
        width: 100%;
        padding: 0.625rem 0;
        display: flex;
        justify-content: space-evenly;
        li {
          line-height: 1.25rem;
          text-align: center;
          background: url(~assets/img/ksh/anfang/zd.png) no-repeat center center;
          background-size: 100% 100%;
          font-size: 0.875rem;
          padding: 0.3125rem 1.25rem;
          color: #fff;
          cursor: pointer;
        }
        li:hover {
          background: url(~assets/img/ksh/anfang/zd-active.png) no-repeat center
            center;
          background-size: 100% 100%;
        }
      }
      .message {
        width: 95%;
        height: 2.5rem;
        background: url(~assets/img/ksh/anfang/zd-message-bg.png) no-repeat
          center center;
        background-size: 100% 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        li {
          color: #fff;
          font-size: 0.875rem;
          text-align: center;
        }
        .name-t,
        .sex-t,
        .age-t {
          width: 2.5rem;
        }
        .cellphone-t,
        .address-t {
          width: 6.25rem;
        }
      }
      .message-list {
        width: 90%;
        height: calc(100% - 6.25rem);
        overflow: auto;
        li {
          width: 100%;
          margin: 0.625rem 0;
          font-size: 0.875rem;
          color: #fff;
          border-bottom: 0.0625rem solid #12a1c967;
          cursor: pointer;
          display: flex;
          justify-content: space-between;
        }
        li:hover {
          background: rgba(255, 255, 255, 0.2);
        }
      }
    }
  }
}
.right-box {
  .box3 {
    .box {
      width: 100%;
      height: 12.5rem;
    }
  }
}
</style>